<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>dulily</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="font/iconfont.css">
	
	<style type="text/css">
		* { padding: 0; margin: 0; box-sizing: border-box; }
		html,body {
			width: 100%;
			height: 100%;
			/* background: url('https://gitee.com/dulily/cdn/raw/master/img/214707-1543326427a764.jpg') no-repeat top center; */
			background: url('https://gitee.com/dulily/cdn/raw/master/img/me.jpg') no-repeat top center;
			background-size: 100% 100%;
		}
		.container { width: 100%; height: 100%; overflow: hidden; position: relative; }
		.contain-top { width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #ffffff; }
		.contain-image { position: relative; }
		.contain-image img { width: 120px; height: 120px; border-radius: 50%; border-bottom: 6px solid rgba(255, 255, 255, 0.2); transition: width 0.5s, height 0.5s; }
		.img-star { position: absolute; top: 14px; right: 31px; width: 5px; height: 5px; border-radius: 50%; background:#ffffff; animation: star 2s 2s infinite; box-shadow: 0 0 2px 2px rgb(235, 235, 235); }
		.contain-image img:hover { cursor: pointer; width: 150px; height: 150px; }
		.title-name { padding: 20px 0; font-weight: bold; font-size: 30px; }
		.animate-box { font-size: 22px; }
		@keyframes star {
			0% { opacity: 1; }
			100% { opacity: 0.2; }
		}
		.fadeOut { animation:fadeOut 1s both; }
		@keyframes fadeOut {
			0%{ opacity: 0; transform: scale3d(.2,.2,.2); }
			100%{ opacity: 1; }
		}
		/* transition: all ease 2s; */
		.animate-left{ animation: slideRight 2s;display: inline-block; }
		@keyframes slideRight {
			0% { transform: translateX(-270px); opacity: 0; transition: .5s; }
			100% { transform: translateX(0px); opacity: 1; transition: .5s; }
		}
		.animate-right{ animation: slideLeft 2s;display: inline-block; }
		@keyframes slideLeft {
			0% { transform: translateX(270px); opacity: 0; transition: .5s; }
			100% { transform: translateX(0px); opacity: 1; transition: .5s; }
		}
		/* .contain-center { width: 100%; height: 80%; position: relative; }
		.center-left, .center-right { width: 80%; height: 100%; background: #ffffff; }
		.center-left { transform: rotate(6deg); position: absolute; bottom: 0px; right: 48%; }
		.center-right { transform: rotate(-6deg); position: absolute; bottom: 0px; left: 48%; } */
		@media screen and (max-width: 500px) {
			.title-name { font-size: 24px; }
			.animate-box{ font-size: 16px; }
		}
		.contain-icons { position: absolute; top: 0; left: 0;z-index: 1000;right: 0; bottom: 0; margin: auto; width: 322px; height: 47px; }
		.contain-icons a { margin: 8px; display: inline-block; }
		.iconfont { font-size: 1.6rem !important; }
		.icon-csdn { color: #ce000d; }
		.icon-bilibili { color: rgb(0, 140, 255); }
		.icon-gitee-fill-round { color:#ce000d; }
		.icon-qq-icon { color: rgb(0, 140, 255); }
		.icon-git { color: rgb(36, 36, 36); }
		.icon-wei_bo { color: rgb(255, 115, 0); }
		.icon-emailheart { color: rgb(85, 85, 85); }
		.contain-footer { color: #444; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 42px;text-align: center; position: fixed; z-index: 1000; bottom: 40px; }
		.contain-footer a { color: #000; }
		a { text-decoration: none; }
		html{
			margin: 0;
			padding: 0;
			border: 0;
			/* font-family:  sans-serif; */
		}
		canvas{
			position: absolute;
			z-index: 999;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			display: block; 
			touch-action: none; 
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="contain-top">
			<div class="contain-image fadeOut">
				<img src="https://gitee.com/dulily/cdn/raw/master/img/ava.png" alt="">
				<div class="img-star"></div>
			</div>
			<div class="title-name fadeOut">Yrainly</div>
			<div class="animate-box">
				<span class="animate-left">星光不问赶路人</span>
				<span class="animate-right">时光不负有心人</span>
			</div>
		</div>
		<div class="contain-center">
			<div class="center-left"></div>
			<div class="center-right"></div>
		</div>
		<div class="contain-icons">
			<a href="mailto:duli2476@163.com"><i class="iconfont icon-emailheart"></i></a>
			<a href=""><i class="iconfont icon-wei_bo"></i></a>
			<a href="https://github.com/03DuLi"><i class="iconfont icon-git"></i></a>
			<a href=""><i class="iconfont icon-qq-icon"></i></a>
			<a href="https://gitee.com/dulily"><i class="iconfont icon-gitee-fill-round"></i></a>
			<a href="https://space.bilibili.com/330504583"><i class="iconfont icon-bilibili"></i></a>
			<a href="https://blog.csdn.net/qq_38157825?spm=1011.2124.3001.5343"><i class="iconfont icon-csdn"></i></a>
		</div>
		<dic class="contain-footer">
			<p>© 2019-2021 duli1126.cn 版权所有 </p>
			<p>ICP证：<a href="http://www.beian.miit.gov.cn/">蜀ICP备19023527号-1</a></p>
		</dic>
		<div class="waveWrapper waveAnimation">
		  <div class="waveWrapperInner bgTop">
		    <div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div>
		  </div>
		  <div class="waveWrapperInner bgMiddle">
		    <div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div>
		  </div>
		  <div class="waveWrapperInner bgBottom">
		    <div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div>
		  </div>
		</div>
		<canvas></canvas>
	</div>
	
	<script src="js/stopExecutionOnTimeout.js"></script>
	<script>
		var canvas = document.querySelector('canvas');
		canvas.height = window.innerHeight;
		canvas.width = window.innerWidth;
		c = canvas.getContext('2d');

		window.addEventListener('resize', function () {
		    canvas.height = window.innerHeight;
		    canvas.width = window.innerWidth;

		    initCanvas();
		});

		var mouse = {
		    x: undefined,
		    y: undefined };

		window.addEventListener('mousemove',
		function (event) {
		    mouse.x = event.x;
		    mouse.y = event.y;
		    drawCircles();
		});

		window.addEventListener("touchmove",
		function (event) {
		    let touch = event.touches[0];
		    mouse.x = touch.clientX;
		    mouse.y = touch.clientY;
		    drawCircles();
		});


		function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
		    this.x = x;
		    this.y = y;
		    this.radius = radius;
		    this.minRadius = radius;
		    this.vx = vx;
		    this.vy = vy;
		    this.birth = birth;
		    this.life = life;
		    this.opacity = opacity;

		    this.draw = function () {
		        c.beginPath();
		        c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
		        c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
		        c.fill();
		    };

		    this.update = function () {
		        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
		            this.vx = -this.vx;
		        }

		        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
		            this.vy = -this.vy;
		        }

		        this.x += this.vx;
		        this.y += this.vy;

		        this.opacity = 1 - (frame - this.birth) * 1 / this.life;

		        if (frame > this.birth + this.life) {
		            for (let i = 0; i < circleArray.length; i++) {
		                if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
		                    circleArray.splice(i, 1);
		                    break;
		                }
		            }
		        } else {
		            this.draw();
		        }
		    };

		}

		var circleArray = [];

		function initCanvas() {
		    circleArray = [];
		}

		var colorArray = [
		'239,239,239',
		'194,210,244',
		'253,233,234'];


		function drawCircles() {
		    for (let i = 0; i < 6; i++) {
		        let radius = Math.floor(Math.random() * 4) + 2;
		        let vx = Math.random() * 2 - 1;
		        let vy = Math.random() * 2 - 1;
		        let spawnFrame = frame;
		        let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
		        let life = 100;
		        circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

		    }
		}

		var frame = 0;
		function animate() {
		    requestAnimationFrame(animate);
		    frame += 1;
		    c.clearRect(0, 0, innerWidth, innerHeight);
		    for (let i = 0; i < circleArray.length; i++) {
		        circleArray[i].update();
		    }

		}

		initCanvas();
		animate();

		// This is just for demo purposes :
		for (let i = 1; i < 110; i++) {
		    (function (index) {
		        setTimeout(function () {
		            mouse.x = 100 + i * 10;
		            mouse.y = 100;
		            drawCircles();
		        }, i * 10);
		    })(i);
		}
	</script>
</body>
</html>